.che-input-box > div
  min-height 70px
  .che-input-box-desktop
    display flex
    margin 0
    [ng-message], [ng-show]
      color $error-color

    input, label, .che-input-area, .che-input-asterisk
      position relative
      line-height 36px

    label.che-input-box-desktop-label
      color $primary-color
      white-space nowrap
      padding-right 10px
      overflow hidden
      text-overflow ellipsis
      margin 1px 0


    .che-input-box-desktop-value-column
      position relative
      display inline-block
      width 100%
      min-height 36px

    input
      width 100%
      outline none
      box-shadow none
      overflow hidden
      text-overflow ellipsis
      white-space nowrap
      background-color $che-white-color
      border 1px solid $default-border-color
      padding 0 20px 0 15px !important
      border-radius 2px

      &:focus
        border-color $primary-color

      &:focus:not(.ng-invalid) + .che-input-asterisk, &[type=number]:not(.ng-invalid):hover + .che-input-asterisk
        display none

      &[required].ng-invalid
        &:focus::-webkit-input-placeholder, &.ng-dirty::-webkit-input-placeholder
          color $error-color
        &:focus::-moz-placeholder, &.ng-dirty::-moz-placeholder
          color $error-color

      &[readonly]
        box-shadow none
        background-color inherit

      &[readonly] + .che-input-asterisk
        display none

      &[disabled], &[disabled] + .che-input-asterisk
        color $disabled-color

      &.ng-invalid:focus, &.ng-invalid.ng-dirty
        border-color $error-color !important

      &.ng-invalid + .che-input-asterisk
        color $error-color

      &:not(.ng-invalid) + .che-input-asterisk
        color $secondary-color

      &.ng-pristine.ng-untouched.ng-invalid
        border-color $default-border-color

    .che-input-asterisk
      position absolute
      padding 0
      top 0
      right 10px
      font-size 12px

  .label-description
    color $disabled-color
    font-size 10px
    padding 5px 20px 0 0
